前端技术周刊 2019-03-25：React Hooks

2019-03-25

前端快爆

• V8 7.4 发布。此版本支持了 JIT-less 启动模式 、WebAssembly Threads 以及私有类成员属性语法 #field，并优化了函数形参实参数不匹配、原生访问器读写、流式解析等场景的性能表现。🔗

点评：Chrome 74 将带着 V8 7.4 内核一起正式发布，这么难看的语法已经快要被正式支持了

• Chrome 74 起，将试验性支持 kv-storage 作为一个标准库。标准库提案旨在提供不用下载即可使用的二方库，而 kv-storage 则旨在为 IndexedDB 提供简单的 kv 读取接口。🔗

点评：标准库提案是一个争议较大的提案，大家是不是觉得 std:jquery 和 std:lodash 更加重要？现在的搞法更像是 BOM 的模块化实现。

• [decorator ]() 提案再次大改，现在版本的 decorator 将提供 4 个基础方法函数 @wrap, @register, @expose 和 @initialize，并支持 decorator 的直接导入导出如 export decorator @logged。🔗

点评：不知道依赖 decorator 的那些库睡觉睡得踏实吗

百宝箱

• React Redux 发布了 7.0.0-beta 版本，在其中实现了 useRedux 接口，并解决了其 v6 版本带来的数据更新遍历 Provider 所有子树节点的性能问题。🔗

点评：为嘛不在 6.0 就提供了 Hooks 版本呢，原因在下面的专题部分有讲

• iodide 是 mozilla 提供的一个通过书写文档生成可视化网页的系统。🔗

点评：为什么看起来这么像是 markdown 版本的 jsbin

• Handtrackjs 是一款前端进行实时手势识别的库，基于 Tensorflow.js 并封装了训练数据。🔗
• React-Router 5 已经发布，Route 支持 array 作为 path 输入值了。🔗

点评：不过还是不支持 hooks

专题：React Hooks

React 一直在寻找更加贴合 UI 开发过程的心智模型，React Hooks 是他们最新的思路。编程方式的巨大变化下，已有的需求需要通过 React Hooks 重新解决。在 React Hooks 正式发布一个半月以后，我们将进行简单的回顾。

简述

• Hooks API

官方文档

• React Hooks 简述

对 React Hooks 要解决的问题、使用方式、带来的好处做了简要介绍

• 议 Function Component 与 Hooks

简述了 Function Component + Hooks 怎样替代掉 Class Component

• Function Component 和 Class Component 的区别

通过具体需求的例子，描述了 Function Component 和 Class Component 开发过程中主要的心智模型区别

实践

• useHooks

React Hooks 实践集锦站点，收集了很多易懂的 React Hooks 实现方式

• 怎么用 React Hooks 造轮子

对 React Hooks 的社区轮子进行了有效的分类，包括 DOM 副作用、动画、请求、表单、生命周期模拟、数据存储和原有库封装

• 如何实现 useInterval
• React Hooks 的闭包陷阱

前文比较了定时器需求中的 useState、useEffect、useReducer 和 useRef 的四种实现方式，正好遍历了主要的 React Hooks API。后文讲述了另一个定时器需求，比较了 useEffect、useLayoutEffect 和 useReducer 三种实现，解释了为何异步的 useEffect 会导致闭包变量读取问题

• 使用 React Hooks 请求数据的四种方式

进阶

• React Hooks 为何依赖调用顺序

本文从与 React Hooks 相抗的多个提案中抽取了 8 个主要问题，并进行了详尽的解释

• useEffect 完全指引

本文主要解释了 useEffect 的所有表现的内在原因，而在这个表现下我们如何利用第二参——React 无法 diff 两次 useEffect 的函数上下文，它的第二参数用于比对依赖的场景。

• useCallback 相关细节

简述了 useCallback 的适用场景和局限性

• 为何 React Redux 还没有支持 React Hooks?

本文主要解释了 React Redux 之前基于 Context 的 API 如何导致了性能问题，而这个性能问题如何阻碍了 React Redux Hooks 的出现的

---

编辑：承虎 & 审阅：一丝 & 霍雍 & 专题供稿：承虎
题图来源：https://hackernoon.com/react-hooks-usestate-using-the-state-hook-89ec55b84f8c